/**
*
* @author zzhijie
* @date 2021-07-06
*/

<template>
  <div class="scale-item" :style="getStyle" @wheel="handleScale">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "scaleItem",
  props: {
    value: {
      type: Number,
      default: 1
    },
    max: {
      typ: Number,
      default: 2
    },
    min: {
      type: Number,
      default: 0.5
    },
    scaleFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    getStyle() {
      if (!this.scaleFlag) return null;
      return {
        transform: `scale(${this.value})`
      }
    }
  },
  methods: {
    handleScale(e) {
      let {wheelDelta, deltaY} = e;
      if (wheelDelta > 0 || deltaY < 0) {
        if (this.value < this.max) {
          this.$emit("input", (+this.value).add(0.1));
        }
      } else {
        if (this.value > this.min) {
          this.$emit("input", (+this.value).subtract(0.1));
        }
      }
    },
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.scale-item {
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
}
</style>
